<template>
  <el-dialog
    width="100%"
    top="0px"
    :fullscreen="true"
    :title="this.title"
     class="label_font"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="170px">


<el-row  >
      <el-col :span="12"   >
            <el-form-item label="抵押权人名称" prop="dyqrmc" class="label_font" >
              <el-input v-model="dataForm.dyqrmc" disabled placeholder="抵押权人名称"  style="width:100%"></el-input>
            </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="抵押权人类型" prop="dyqrlx" class="label_font">
            <el-select v-model="dataForm.dyqrlx" disabled placeholder="抵押权人类型"  style="width:100%" >
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>

      <el-col :span="12">
          <el-form-item label="抵押权人证件类型" prop="dyqrzjlx" class="label_font">
            <el-select v-model="dataForm.dyqrzjlx" disabled placeholder="抵押权人证件类型"  style="width:100%" >
            </el-select>
          </el-form-item>
      </el-col>

      <el-col :span="12">
            <el-form-item label="抵押权人证件号码" prop="dyqrzjhm" class="label_font" >
              <el-input v-model="dataForm.dyqrzjhm" disabled placeholder="抵押权人证件号码"  style="100%"></el-input>
            </el-form-item>
      </el-col>

    </el-row>


    <el-row>
      <el-col :span="12">
          <el-form-item label="抵押人代理人名称" prop="dyrdlrmc" class="label_font">
            <el-input v-model="dataForm.dyrdlrmc" disabled placeholder="抵押人代理人名称" ></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="抵押人代理人类型" prop="dyrdlrlx" class="label_font">

            <el-select v-model="dataForm.dyrdlrlx" disabled placeholder="抵押人代理人类型" style="width:100%"  >
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="抵押人代理人证件类型" prop="dyrdlrzjlx" class="label_font">
            <el-select v-model="dataForm.dyrdlrzjlx" disabled placeholder="抵押人代理人证件类型" style="width:100%"  >
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="抵押人代理人证件号码" prop="dyrdlrzjhm" class="label_font">
            <el-input v-model="dataForm.dyrdlrzjhm" disabled placeholder="抵押人代理人证件号码" ></el-input>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="预抵押业务件号" prop="ydywjh" class="label_font">
            <el-input v-model="dataForm.ydywjh" disabled placeholder="预抵押业务件号" :readonly="true"></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="预抵押登记证明号" prop="ydbdcdjzmh" class="label_font">
            <el-input v-model="dataForm.ydbdcdjzmh" disabled placeholder="预抵押登记证明号"  :readonly="true"></el-input>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row >
      <el-col :span="12">

        <el-form-item label="地市" prop="seRegion">
          <el-select  @change="selectChanged" disabled v-model="dataForm.seRegion" placeholder="区域" style="width:100%" >
              <el-option
                v-for="item in dataForm.seRegionList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="区县" prop="region">
            <el-select v-model="dataForm.region" disabled placeholder="区县" style="width:100%" >
                <el-option
                  v-for="item in dataForm.regionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="代理人电话" prop="dlrdh" class="label_font">
            <el-input v-model="dataForm.dlrdh" disabled placeholder="代理人电话"   ></el-input>
          </el-form-item>
      </el-col>

              <el-col :span="12">
          <el-form-item label="业务类型" prop="ywlx" class="label_font">
            <el-select v-model="dataForm.ywlx" disabled placeholder="业务类型" style="width:100%" >
                <el-option
                        :key="''"
                        :label="'散件'"
                        :value="''">
                </el-option>
            </el-select>
          </el-form-item>
      </el-col>

    </el-row>    


  <el-row>
      <el-col :span="12">
          <el-form-item label="债务人" prop="zwr" class="label_font">
            <el-input v-model="dataForm.zwr" disabled placeholder="多人用/分隔" ></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="债务履行开始日期" prop="zwbegintime" class="label_font">
            <el-date-picker v-model="dataForm.zwbegintime" disabled placeholder="债务履行开始日期"    format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:100%" ></el-date-picker>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="债务履行结束日期" prop="zwendtime" class="label_font">
            <el-date-picker v-model="dataForm.zwendtime" disabled placeholder="债务履行开始日期"   format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:100%" ></el-date-picker>
          </el-form-item>
      </el-col>

            <el-col :span="12">
          <el-form-item label="主债权担保金额(万元)" prop="dbje" class="label_font">
            <el-input v-model="dataForm.dbje" disabled placeholder="主债权担保金额(万元)"></el-input>
          </el-form-item>
      </el-col>

    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="办理点" prop="site" class="label_font">
          <el-select v-model="dataForm.site" disabled placeholder="办理点" style="width:100%"  >
                <el-option
                  v-for="item in dataForm.siteList"
                  :key="item.siteno"
                  :label="item.sitename"
                  :value="item.siteno">
                </el-option>
            </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="领证方式" prop="gettype" class="label_font">
             <el-select v-model="dataForm.gettype" disabled placeholder="领证方式" style="width:100%"  >

            </el-select>
        </el-form-item>
      </el-col>

    </el-row>

        <el-row>

      <el-col :span="12">
        <el-form-item label="带抵押过户标识" prop="dyghbs" class="label_font">
             <el-select v-model="dataForm.dyghbs" disabled placeholder="带抵押过户标识" style="width:100%"  >
                        <el-option
                        v-for="item in dataForm.dyghList"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value">
                        </el-option>
            </el-select>
        </el-form-item>
      </el-col>
 
            <el-col :span="12">
                    <el-form-item label="抵押担保范围" prop="dbfw" class="label_font">
                        <el-input v-model="dataForm.dbfw" disabled placeholder="抵押担保范围" ></el-input>
                    </el-form-item>   
            </el-col>
   
    </el-row>

    <el-row >

            <el-col :span="12">
                <el-form-item label="抵押方式" prop="dyfs" class="label_font">
                    <el-select v-model="dataForm.dyfs" disabled placeholder="抵押方式" style="width:100%"   >
                        <el-option
                        :key="'0'"
                        :label="'一般抵押'"
                        :value="'0'" >
                        </el-option>
                        <el-option
                        :key="'1'"
                        :label="'最高额抵押'"
                        :value="'1'">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>

                    <el-col :span="12">
            <el-form-item label="登记识别码" prop="isdzyxyw"  class="label_font">
               <el-select v-model="dataForm.isdzyxyw" disabled placeholder="登记识别码" style="width:100%"  >
                        <el-option
                        :key="'0'"
                        :label="'纸质归档业务'"
                        :value="'0'" >
                        </el-option>
                        <el-option
                        :key="'1'"
                        :label="'电子归档业务'"
                        :value="'1'">
                        </el-option>
               </el-select>
            </el-form-item>  
            </el-col>
    </el-row>




<el-row v-if="dataForm.relatedBdcxx.length > 0">
          <el-col :span="24">
    <el-table
      :data="dataForm.relatedBdcxx"
      border
      type="index"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">

        <el-table-column
            prop="realtycertno"
            header-align="center"
            align="center"
            label="不动产权证号">
        </el-table-column>

        <el-table-column
            prop="realtyunitno"
            header-align="center"
            align="center"
            label="不动产单元号">
        </el-table-column>

                <el-table-column
            prop="zl"
            header-align="center"
            align="center"
            label="不动产坐落">
        </el-table-column>

                <el-table-column
            prop="mj"
            header-align="center"
            align="center"
            label="不动产面积">
        </el-table-column>



        </el-table>


          </el-col>
        </el-row>

<el-row v-if="dyrList.length > 0">
          <el-col :span="24">

    <el-table
      :data="dyrList"
      border
      type="index"
      
      @selection-change="selectionChangeHandle"
      style="width: 100%;">

        <el-table-column
            prop="MC"
            header-align="center"

            align="center"
            label="抵押人名称">


        </el-table-column>

        <el-table-column
            prop="RYLX"
            header-align="center"
            align="center"
            label="抵押人类型">

        </el-table-column>

        <el-table-column
            prop="ZJLB"
            header-align="center"
            align="center"
            label="抵押人证件类别">
        </el-table-column>

        <el-table-column
            prop="ZJHM"
            header-align="center"
            align="center"
            label="抵押人证件号码">
        </el-table-column>

         <el-table-column
            prop="LXDH"
            header-align="center"
            align="center"
            label="抵押人电话号码">
        </el-table-column>



        </el-table>


          </el-col>
        </el-row>

  

    </el-form>
    <span slot="footer" class="dialog-footer"> 

              <el-button @click="goback()">关闭</el-button>

    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
  
        tip:'',
        options: [],
        htbaItems: [],
        loading: false,
        visible: false,
        url: '',
        title: '',
     

        dataListLoading: false,
        submitLoading: false,
        dyrList: [],
        seqno: 0,
        step: 0,
        seRegion: '',
        region: '',
        application: 0,

        dataForm: {
          seRegionList: [],
          regionList: [],
          dyqrlxdh: '',
          seqno: 0,
          dyqrmc: '',
          dyqrlx: '',
          dyqrzjlx: '',
          dyqrzjhm: '',
          dyrdlrmc: '',
          region: '',
          seRegion: '',

          dyrdlrlx: '',
          dyrdlrzjlx: '',

          ydywjh: '',
          ydbdcdjzmh: '',  

          dyrdlrzjhm: '',
          dlrdh: '',
          gllx: '',

          babsm: '',
          dbje: '',

          zwr: '',
          rightagenttype: '个人',
          rightagentidtype: '身份证',
 
          zwbegintime: '',
          zwendtime: '',
          site: '',
          yzbfs: '',
          gettype: '',
          dyghbs: '',
          dbfw: '',

          left1: '',
          left2: '',
 
          right1: '',
          right2: '',

          dyghList: [],
          idTypeList: [],
          rylxList: [],
          yzbTypeList: [],
          bdcxxList: [],
          relatedBdcxx:[],
          contractTypeList: [],
          contractno: '',
          ctype: '',
          isdzyxyw: '0',
          dyfs: '',
          btype: '7',
  
          ywlx: ''
        },
        dataRule: {


        }
      }
    },
    methods: {
      init (step, id, ywjh, region) {

        this.dataForm.relatedBdcxx = []
        this.dyrList = []  


        this.seqno = id

        this.visible = true

        this.dataForm.gettype = '电子证明';
        this.step = step;
        this.title = '显示详情';
        
        
        this.$http({
          url: this.$http.adornUrl(`/bdc/manualyzb/item/list`),
              method: 'get',
              params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
                this.dataForm.siteList = data.siteList
                this.dataForm.yzbTypeList = data.yzbTypeList
                this.dataForm.dyghList = data.dyghList
                this.dataForm.rylxList = data.rylxList
                this.dataForm.idTypeList = data.idTypeList
   
 
            }
        })

        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
                  
          this.$http({
            url: this.$http.adornUrl(`/bdc/manualyzb/sitem/list`),
                method: 'get',
                params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                  this.dataForm.seRegionList = data.regionList
                  this.dataForm.dyqrmc = data.dyqrmc
                  this.dataForm.dyqrlxdh = data.dyqrlxdh
                  this.dataForm.dyqrlx = '单位';
                  this.dataForm.dyqrzjlx = '统一社会信用代码';
                  this.dataForm.dyqrzjhm = data.uscc
  
              }
          })
          this.dataForm.dyrdlrlx = '个人'
          this.dataForm.dyrdlrzjlx = '身份证'
          this.dataForm.dbfw = '详见合同'
            

                    this.submitLoading = true;
                    this.tip = "加载中"  
                  this.$http({
                  url: this.$http.adornUrl(`/bdc/zzyzb/info/${this.seqno}`),
                  method: 'get',
                  params: this.$http.adornParams()
                }).then(({data}) => {
                  if (data && data.code === 0) {
                  if (data.bdcxxList){
                    this.dataForm.relatedBdcxx = data.bdcxxList  
                  }
                  
                  this.dyrList = data.dyrList
                  if (data.bdcxxList){
                      this.dataForm.bdcxxList = data.bdcxxList
                  }
           
                  this.dataForm.seRegion = data.bdcMortgregist.seRegion
                  this.dataForm.region = data.bdcMortgregist.region
                  this.seRegion = data.bdcMortgregist.seRegion
                  this.region = data.bdcMortgregist.region

                  this.dataForm.dyqrmc = data.dyqrmc
                  this.dataForm.dyqrlxdh = data.dyqrlxdh
                  this.dataForm.dyqrlx = '单位';
                  this.dataForm.dyqrzjlx = '统一社会信用代码';
                  this.dataForm.dyqrzjhm = data.uscc

                  this.dataForm.dyrdlrmc = data.dyrdlr.MC
                  if (data.dyrdlr.RYLX){
                    this.dataForm.dyrdlrlx = data.dyrdlr.RYLX
                  }
                  else{
                     this.dataForm.dyrdlrlx = '个人'
                  }
                  if (data.dyrdlr.ZJLB){
                     this.dataForm.dyrdlrzjlx = data.dyrdlr.ZJLB
                  }else{
                     this.dataForm.dyrdlrzjlx = '身份证'
                  }
                 
                  this.dataForm.dyrdlrzjhm = data.dyrdlr.ZJHM
                  this.dataForm.dlrdh = data.dyrdlr.LXDH

                  this.dataForm.gllx = '预抵和预告合并办理'
                  this.dataForm.babsm = data.bdcMortgregist.babsm
                  this.dataForm.site = data.bdcMortgregist.bld
                

                  this.dataForm.zwr = data.zwr



                  // this.dataForm.contractno = data.htba.HTBAH
                  // this.dataForm.ctype = data.htba.HTLX

                  this.dataForm.dbje = data.bdcMortgregist.bdbzqse
          
                  this.dataForm.zwbegintime = data.bdcMortgregist.zwlxqssj
                  this.dataForm.zwendtime = data.bdcMortgregist.zwlxjssj
                  this.dataForm.yzbfs = data.bdcMortgregist.iszzyzb
                  this.dataForm.dyghbs = data.bdcMortgregist.isdygh
                  this.dataForm.dbfw = data.bdcMortgregist.dbfw

                  this.dataForm.ydywjh = data.bdcMortgregist.ydywjh
                  this.dataForm.ydbdcdjzmh = data.bdcMortgregist.ydbdcdjzmh

                    if (data.file01){
                      this.fileList1.push({'name':data.file01})
                    }
                    if (data.file02){
                      this.fileList2.push({'name':data.file02})
                    }
                    if (data.file03){
                      this.fileList3.push({'name':data.file03})
                    }
                    if (data.file04){
                      this.fileList4.push({'name':data.file04})
                    }
                    var ywlx = data.bdcMortgregist.ywlx
                    this.dataForm.dyfs = ywlx == 'E5101000903103' ? '0' : '1'

                  }
                  this.submitLoading = false
                }).catch(err => {
                 this.submitLoading = false;
                 console.error(err);            
              }); 
            
            
          
        })
      },


      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },






      goback(){
          this.visible = false
          this.$emit('refreshDataList')
      }


    }
  }
</script>

<style>
.el-input.is-disabled .el-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #313b50;
    cursor: not-allowed;
}
</style>